<template>
  <view class="container">
    <view class="main">
      <view class="block goodsInfo mbom30">
        <view class="title">
          订单编号：{{orderDetail.order_id}}
        </view>
        <view class="goodsMenu">
          <view class="goods-item" v-for="(item, index) in orderDetail.cartInfo" :key="index">
            <image class="goodsImg" :src="item.productInfo.image" mode=""></image>
            <view class="goodsInfo">
              <view class="goodsName text-twoline-ellipsis">
                {{item.productInfo.store_name}}
              </view>
              <view class="foot">
                <view class="price">
                  ￥{{item.productInfo.price}}
                </view>
                <view class="count">
                  x{{item.cart_num}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="refundInfo mbom30">
       <view class="refundInfo-item" style="border-bottom: 2rpx solid #eee;" v-if="orderDetail._status._type == 1">
          <view class="label">
            退款类型
          </view>
          <view class="value">
            <text>仅退款</text>
          </view>
        </view>
        <view class="refundInfo-item" style="border-bottom: 2rpx solid #eee;" v-if="orderDetail._status._type == 2"
          @click="openPicker2">
          <view class="label">
            <text style="color: red;">*</text>退款类型
          </view>
          <view class="value">
            <text>{{refundName?refundName:'请选择'}}</text>
            <image class="arrow-icon" src="/static/images/arrow.png" mode=""></image>
          </view>
        </view>
        <view class="refundInfo-item" style="border-bottom: 2rpx solid #eee;" @click="openPicker">
          <view class="label">
            <text style="color: red;">*</text>退款原因
          </view>
          <view class="value">
            <text>{{params.text?params.text:'请选择'}}</text>
            <image class="arrow-icon" src="/static/images/arrow.png" mode=""></image>
          </view>
        </view>
       <view class="refundInfo-item" v-if="orderDetail._status._type == 1">
          <view class="label">
            退款金额
          </view>
          <view class="value">
            <text>{{orderDetail.pay_price}}</text>
          </view>
        </view>
       <view class="refundInfo-item" style="position: relative;" v-if="orderDetail._status._type == 2">
          <view class="label">
            <text style="color: red;">*</text>退款金额
          </view>
          <view class="value">
            <input style="text-align: right;" type="text" v-model="params.refund_price" />
            <image class="arrow-icon" src="/static/images/arrow.png" mode=""></image>
          </view>
  <!--        <view class="desc"
            style="font-weight: 400;font-size: 20rpx;color: #EA2222;position: absolute;bottom: -30rpx;">
            可修改，最多￥{{orderDetail.pay_price}}，含发货邮费￥{{orderDetail.pay_postage}}
          </view> -->
        </view>

      </view>
      <view class="desc block">
        <view class="desc-title">
          申请说明
        </view>
        <view class="desc-content">
          <textarea class="textarea-ipt" v-model="params.refund_reason_wap_explain" placeholder-class="styles"
            placeholder="请详细填写申请说明"></textarea>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="btn" @click="onSave">
        提交
      </view>
    </view>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
    <uv-picker ref="picker2" :columns="columns2" keyName="name" @confirm="confirm2"></uv-picker>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        columns: [
          ['中国', '美国', '日本']
        ],
        columns2: [
          [{
              name: "仅退款",
              value: 1
            },
            {
              name: "退货退款",
              value: 2
            },
          ]
        ],
        params: {
          id: "",
          text: "",
          refund_reason_wap_explain: "",
          refund_type: "",
          refund_price: ""
        },
        orderDetail: {
          _status: {
            _type: 1
          }
        },
        refundName: ""
      }
    },
    onLoad(option) {
      this.params.id = option.id;
      this.getReasonList();
      this.getDetail(option.orderNo);
    },
    methods: {
      openPicker() {
        this.$refs.picker.open();
      },
      openPicker2() {
        this.$refs.picker2.open();
      },
      getReasonList() {
        reqApi.reasonList({}).then(res => {
          console.log("退款原因列表", res);
          this.columns = [
            [...res.data]
          ];
        })
      },
      getDetail(orderNo) {
        console.log("订单编号", orderNo);
        reqApi.orderDetail({
          uni: orderNo
        }).then(res => {
          console.log("商品详情", res);
          this.orderDetail = res.data;
          this.params.refund_price = res.data.pay_price;

          if (this.orderDetail._status._type == 1) {
            this.params.refund_type = 1;
          }
        })
      },
      onSave() {
        if (this.orderDetail._status._type == 2) {

          if (!this.params.refund_type) {
            uni.showToast({
              title: "请选择退款类型",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
            return
          }
          if (!this.params.refund_price) {
            uni.showToast({
              title: "请输入退款金额",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
            return
          }

        }
        if (!this.params.text) {
          uni.showToast({
            title: "请选择退款原因",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.applyRefund(this.params).then(res => {
          uni.showToast({
            title: "退款申请提交成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 1500)
        })
      },
      confirm(e) {
        console.log('退款原因', e);
        this.params.text = e.value[0];
      },
      confirm2(e) {
        console.log('退款类型', e);
        const {
          name,
          value
        } = e.value[0];
        this.params.refund_type = value;
        this.refundName = name;
      }
    }
  }
</script>
<style>
  .styles {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .footer{
    padding: 56rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    width: 100%;
    .btn{
      width: 100%;
      height: 88rpx;
      background: #F86F03;
      border-radius: 44rpx;
      text-align: center;
      line-height: 88rpx;
      color: #fff;
    }
  }
  .desc {
    .desc-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 20rpx;
    }

    .desc-content {
      .textarea-ipt {
        width: 100%;
        height: 360rpx;
        background: #F7F8FA;
        border-radius: 20rpx;
        padding: 30rpx;
        box-sizing: border-box;
      }
    }
  }

  .refundInfo {
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    background: #fff;

    .refundInfo-item {
      display: flex;
      justify-content: space-between;
      height: 100rpx;
      line-height: 100rpx;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }

      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        display: flex;
        align-items: center;

        .arrow-icon {
          width: 48rpx;
          height: 48rpx;
        }
      }

    }
  }

  .mbom30 {
    margin-bottom: 30rpx;
  }

  .block {
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 30rpx;
  }

  .container {

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      .goodsInfo {
        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }

        .goodsMenu {
          .goods-item {
            margin-top: 30rpx;
            display: flex;

            .goodsImg {
              width: 160rpx;
              height: 160rpx;
              border-radius: 20rpx;
              margin-right: 20rpx;
            }

            .goodsInfo {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .goodsName {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #333333;
              }

              .foot {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #EA2222;
                }

                .count {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #AAAAAA;
                }
              }
            }
          }
        }
      }
    }

  }
</style>